<template>
    <div>
        <h1>User Management</h1>
        <UserContainer :initialUser="user" :mode="mode" @submit="handleSubmit" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import UserContainer from './components/UserContainer.vue';

const user = ref({ name: 'John Doe', email: 'john.doe@example.com' });
const mode = ref<'view' | 'edit' | 'add'>('add');

const handleSubmit = (updatedUser: { name: string; email: string }) => {
    console.log('Submitted User:', updatedUser);
    user.value = updatedUser;
    mode.value = 'view'; // Switch back to view mode after submission
};
</script>